<template>
  <div class="my-curriculum">
    <Calendar
      :sunday-start="true"
      :mark-date="courseDateList"
      :text-top="textTop"
      @choseDay="clickDay"
    />
    <div v-if="getCourseListSuccess && courseList.length > 0">
      <div
        v-for="(item, index) in courseList"
        :key="item.ChapterName + index"
        class="my-schedule"
      >
        <MySchedule :course-info="item" />
      </div>
    </div>
    <div
      v-if="getCourseListSuccess && courseList.length === 0"
      class="no-course"
    >
      <img
        src="../../assets/class/no_data.png"
        class="no-data-img"
      >
      <div class="no-data-prompt">
        暂无数据
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Calendar from 'vue-calendar-component'
export default Vue.extend({
  components: {
    Calendar,
    MySchedule: () => import('components/Mine/Course_Table.vue'),
  },
  data () {
    return {
      courseDateList: [],
      courseList: [],
      nowDate: '',
      textTop: ['日', '一', '二', '三', '四', '五', '六'],
      getCourseListSuccess: false,
    }
  },
  created () {
    this.nowDate = this.getNowFormatDate()
    this.getDateList()
    this.getCourseList()
  },
  methods: {
    // 获取课程详情列表
    getCourseList () {
      this.$axios({
        url: 'course/getMySchedule',
        data: {
          ClassId: '0',
          Date: this.nowDate,
        },
      }, 1).then(res => {
        this.$set(this.$data, 'courseList', res)
        this.getCourseListSuccess = true
      }, () => {
        this.$set(this.$data, 'courseList', [])
        this.getCourseListSuccess = true
      })
    },
    // 获取当月对应有课程的日期
    getDateList () {
      this.$axios({
        url: 'Live/GetScheduleDateListForWeb',
      }).then(res => {
        let arr = []
        for (let i in res) {
          arr.push(res[i].Date)
        }
        this.$set(this.$data, 'courseDateList', arr)
      })
    },
    // 修改日期
    clickDay (item:any) {
      this.nowDate = item.replace(/\//g, '-')
      this.getCourseList()
    },
    // 格式化日期
    getNowFormatDate () {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      let currentdate = year + '-' +
      ((month >= 1 && month <= 9) ? ('0' + month) : month) + '-' +
       ((strDate >= 0 && strDate <= 9) ? ('0' + strDate) : strDate)
      return currentdate
    },
  },
})
</script>
<style lang="scss" scoped>
.my-curriculum {
  background-color: #fff;
}
.wh_container {
  max-width: 100%;
  padding-bottom: 40px;
  /deep/ {
    .wh_content {
      padding: 0;
    }
    .wh_content_all {
      background-color: #fff;
    }
    .wh_jiantou1 {
      border-top: 2px solid #333;
      border-left: 2px solid #333;
    }
    .wh_jiantou2 {
      border-top: 2px solid #333;
      border-right: 2px solid #333;
    }
    .wh_top_changge li {
      color: #333;
    }
    .wh_content_item {
      color: #333;
      & .wh_isToday {
        color: $primary-web;
        background-color: #fff;
      }
      & .wh_isMark {
        position: relative;
        background-color: #fff;
      }
      & .wh_isMark::after {
        content: "";
        position: absolute;
        bottom: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: scale(0.5);
        background-color: $primary-web;
      }
      & .wh_chose_day {
        color: #fff;
        background-color: $primary-web;
      }
    }
    & .wh_content_item, .wh_top_changge li {
      width: calc(100% / 7)
    }
  }
}
.my-schedule {
  margin: 20px 24px 0;
  padding: 0 20px;
  height: 270px;
  box-shadow:0px 0px 13px 0px rgba(233,233,233,1);
}
.no-course {
  margin-top: 20px;
  text-align: center;
  .no-data-img {
    width: 150px;
    margin-bottom: 20px;
  }
  .no-data-prompt {
    font-size: 32px;
  }
}
</style>
